import { SyncOutlined } from "@ant-design/icons"
import { SelectLang as UmiSelectLang, useIntl, useModel } from "@umijs/max"
import { Button } from "antd"

export type SiderTheme = "light" | "dark"
export const SelectLang = () => {
  return (
    <UmiSelectLang
      style={{
        padding: 4
      }}
    />
  )
}

export const FullSwitch = () => {
  const { callPy } = useModel("websocketModel")
  const intl = useIntl()
  const switchFullScreen = async () => {
    const response = await callPy("produce", "switch_screen_from_web", [])
  }
  return (
    <div
      style={{
        display: "flex",
        height: 26,
        alignItems: "center" // 垂直居中
      }}
    >
      <Button
        icon={<SyncOutlined />}
        onClick={switchFullScreen}
        style={{
          backgroundColor: "inherit", // 背景色与父控件一致
          color: "rgba(255, 255, 255, 0.6)", // 字体颜色
          border: "none" // 去掉边框
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = "#6495ED" // 悬浮时背景色
          e.currentTarget.style.color = "rgba(255, 255, 255)" // 悬浮时字体颜色
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = "inherit" // 恢复背景色
          e.currentTarget.style.color = "rgba(255, 255, 255, 0.6)" // 恢复字体颜色
        }}
        onMouseDown={(e) => {
          e.currentTarget.style.transform = "scale(0.95)" // 点击时缩小
        }}
        onMouseUp={(e) => {
          e.currentTarget.style.transform = "scale(1)" // 恢复大小
        }}
      >
        {intl.formatMessage({ id: "rightContent.fullScreenSwitch" })}
      </Button>
    </div>
  )
}
